<template>
    <div class="dynamic">
        <div class="dynamic_num">
            <div class="num_time">8月27日</div>
            <div class="today_num">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>8</div>
                            <div class="today_num_title">新增确诊</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>8</div>
                            <div class="today_num_title">本土新增</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>8</div>
                            <div class="today_num_title">境外输入</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="num_time" v-if="dataList.list">截止：{{dataList.list[0].inputTime | dateFormat}}</div>
            <div class="pass_num">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{outside}}</div>
                            <div class="today_num_title">境外输入</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{severe}}</div>
                            <div class="today_num_title">现有重症</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{suspected}}</div>
                            <div class="today_num_title">疑似</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:1rem">
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{confirmed}}</div>
                            <div class="today_num_title">累计确诊</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{cure}}</div>
                            <div class="today_num_title">累计出院</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>{{dead}}</div>
                            <div class="today_num_title">累计死亡</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="dynamic_table">
            <div class="num_time">国内病例</div>
            <div class="table_title">
                <el-row>
                    <el-col :span="4" style="background-color: #e0e1fc">地区</el-col>
                    <el-col :span="4" style="background-color: #dd837f">新增确诊</el-col>
                    <el-col :span="4" style="background-color: #f4d3aa">新增疑似</el-col>
                    <el-col :span="4" style="background-color: #f7cccb">境外输入</el-col>
                    <el-col :span="4" style="background-color: #c5eab4">新增治愈</el-col>
                    <el-col :span="4" style="background-color: #d2d2d2">新增死亡</el-col>
                </el-row>
                <el-row class="table_details" v-for="item in dataList.list" :key="item.id">
                    <el-col :span="4">{{item.province}}</el-col>
                    <el-col :span="4">{{item.confirmed}}</el-col>
                    <el-col :span="4">{{item.suspected}}</el-col>
                    <el-col :span="4">{{item.outside}}</el-col>
                    <el-col :span="4">{{item.cure}}</el-col>
                    <el-col :span="4">{{item.dead}}</el-col>
                </el-row>
            </div>
        </div>

        <div class="dynamic_list">
            <div class="list_header">国内病例</div>
            <div class="list_details" v-for="item in articles.list" :key="item.id">
                <div class="list_time"><strong>{{item.publishTime | dateFormat}}</strong> </div>
                <div class="list_title" @click="toDetailsHandler(item.id)">{{item.title}} </div>
                
            </div>
        </div>
        <el-dialog :title="article.title" :visible.sync="dialogVisible" width="80%">
            <div>
                <div v-html="article.content"></div>
            </div>
            <!-- {{article}} -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'

export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 10
            },
            obj: {
                page: 1,
                pageSize: 10
            },
            dialogVisible: false
        }
    },
    computed: {
        ...mapState("data",["dataList"]),
        ...mapState("article",["articles","article"]),
        ...mapGetters("data",["confirmed","cure","dead","suspected","severe","outside"])
    },
    created() {
        this.pageQueryData(this.params)
        this.queryArticles(this.obj)
    },
    methods: {
        ...mapActions("data",['pageQueryData']),
        ...mapActions("article",["queryArticles","finaArticleById"]),
        // 展示详情
        toDetailsHandler(id) {
            this.dialogVisible = true;
            this.finaArticleById(id)
        },
    },
}
</script>

<style scoped>
    .list_title {
        background-color: #fff;
        margin-top: .2rem;
        border-radius: 8px;
        font-size: 14px;
        color: #666;
        padding: 0 1rem;
        line-height: 49px;
    }
    .list_details {
        background-color: #f8f8f8;
        padding: .5rem 1rem;
    }
    .table_details {
        border-bottom: 1px solid #ededed;
    }
    .table_title .el-col {
        text-align: center;
        line-height: 60px;
        border-radius: 0;
    }
    .num_time , .list_header{
        color: #999999;
        margin: .5rem 0;
    }
    .el-col {
        border-radius: 4px;
    }
    /* .bg-purple-dark {
        background: #eefaff;
    } */
    .pass_num .bg-purple {
        background: #fbf5ef;
    }
    .pass_num .grid-content div:first-child {
        height: 45px;
        line-height: 45px;
        color: #ff6a03;
        font-size: 16px;
        font-weight: bold;
    }
    .today_num .bg-purple {
        background: #eefaff;
    }
    .today_num .bg-purple-light {
        background: #e5e9f2;
    }
    .today_num .grid-content div:first-child {
        height: 45px;
        line-height: 45px;
        color: #ff6a03;
        font-size: 16px;
        font-weight: bold;
    }
    .grid-content div:last-child {
        line-height: 30px;
        height: 30px;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        text-align: center;
        padding: .8rem;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>